<template>
  <dv-full-screen-container>
    <dv-border-box-1>
      <div>
        <!-- 火情详情弹出框 -->
        <el-dialog title="火情信息" :visible.sync="fireMsgVisible">
          <div style="border: solid 1px #000;">
            <el-row :gutter="0" style="border-bottom: solid 1px #000;">
              <el-col :span="8">
                <div class="fire_info">事件名称：</div>
                <div class="fire_data">{{fireMessage[fireIndex].event_name}}</div>
              </el-col>
              <el-col :span="8">
                <div class="fire_info">监控点名称：</div>
                <div class="fire_data">{{fireMessage[fireIndex].cameraName}}</div>
              </el-col>
              <el-col :span="8">
                <div class="fire_info">着火时间：</div>
                <div class="fire_data">{{fireMessage[fireIndex].startTime}}</div>
              </el-col>
            </el-row>
            <el-row :gutter="0">
              <el-col :span="8">
                <div class="fire_info">着火原因：</div>
                <div class="fire_data">{{fireMessage[fireIndex].fireReason}}</div>
              </el-col>
              <el-col :span="8">
                <div class="fire_info">经度：</div>
                <div class="fire_data">{{fireMessage[fireIndex].longitude}}</div>
              </el-col>
              <el-col :span="8">
                <div class="fire_info">纬度：</div>
                <div class="fire_data">{{fireMessage[fireIndex].latitude}}</div>
              </el-col>
            </el-row>
          </div>
          <el-carousel trigger="click" height="600px">
            <el-carousel-item v-for="(item,index) in firePicture" :key="index">
              <el-image style="width: 100%; height: 100%" :src="item"></el-image>
            </el-carousel-item>
          </el-carousel>
        </el-dialog>
        <div class="title">
          <div style="font-size:50px;">西岭雪山森林防火监控系统</div>
        </div>
        <div class="bk">
          <div id="l-video">
            <div class="box">
             <dv-border-box-8 :reverse="true">
                <div class="left-v">
                  <vue-aliplayer-v2 :source="sources[0]" ref="VueAliplayerV2A" :options="options" />
                </div>
              </dv-border-box-8>
              <dv-border-box-8 :reverse="true">
                 <div class="left-v">
                   <vue-aliplayer-v2 :source="sources[2]" ref="VueAliplayerV2A" :options="options" />
                 </div>
               </dv-border-box-8>
               <dv-border-box-8 :reverse="true">
                  <div class="left-v">
                    <vue-aliplayer-v2 :source="sources[3]" ref="VueAliplayerV2A" :options="options" />
                  </div>
                </dv-border-box-8>
            </div>
          </div>
          <div class="mid">
            <div id="video">
              <dv-border-box-7>
                <div class="map">
                  <el-dialog title="标题" :visible.sync="dialogTableVisible" center @close='closeDialog'>
                    <div class="dialogDiv">
                      <vue-aliplayer-v2 :source="dialogSource" ref="VueAliplayerV2" :options="dialogOptions" />
                    </div>
                  </el-dialog>
                  <div class="amap-wrapper">
                    <el-amap class="amap-box" :vid="'amap-vue'" :plugin="plugin" :center="center" zoom="18"
                      :amap-manager="amapManager" :events="mapEvents">
                      <!-- 塔标点 -->
                      <el-amap-marker :key="marker.id" v-for="marker in towerMarkers" :position="marker.position"
                        :visible="true" :icon="towerIcon" :events="towerMarkerEvents" :vid="marker.id" ref="markersRef">
                      </el-amap-marker>
                      <!-- 火灾标点 -->
                      <el-amap-marker :key="marker.id" v-for="marker in fireMessage"
                        :position="[Number(marker.latitude),Number(marker.longitude)]" :visible="true" :icon="fireIcon"
                        :events="fireMarkerEvents" :vid="marker.id" ref="markersRef"></el-amap-marker>
                    </el-amap>
                  </div>
                </div>
              </dv-border-box-7>
            </div>
            <div class="table">
              <div class="tb-1">
                <dv-border-box-2 :color="['#1ef0ed', '#1ef0ed']">
                  <chart :options="orgOptions" :auto-resize="true" style="width:100%;height:100%" autoresize></chart>
                </dv-border-box-2>
              </div>
              <div class="tb-2">
                <dv-border-box-2 :color="['#1ef0ed', '#1ef0ed']">
                  <div class="round">
                    <dv-active-ring-chart :config="round" style="width: 150px; height: 150px" />
                    <dv-active-ring-chart :config="round" style="width: 150px; height: 150px" />
                    <dv-active-ring-chart :config="round" style="width: 150px; height: 150px" />
                  </div>
                </dv-border-box-2>
              </div>
            </div>
          </div>
          <div class="right">
            <div id="weather-v2-plugin-standard"></div>
            <div id="transducer">
              <dv-decoration-9>{{ currentArray[0].sensorName }}:<br />{{
                  currentArray[0].vals + currentArray[0].unit
                }}</dv-decoration-9>
              <dv-decoration-9>{{ currentArray[1].sensorName }}:<br />{{
                  currentArray[1].vals + currentArray[1].unit
                }}</dv-decoration-9>
              <dv-decoration-9>{{ currentArray[2].sensorName }}:<br />{{
                  currentArray[2].vals + currentArray[2].unit
                }}</dv-decoration-9>
              <dv-decoration-9>{{ currentArray[3].sensorName }}:<br />{{
                  currentArray[3].vals + currentArray[3].unit
                }}</dv-decoration-9>
              <dv-decoration-9>{{ currentArray[4].sensorName }}:<br />{{
                  currentArray[4].vals + currentArray[4].unit
                }}</dv-decoration-9>
              <dv-decoration-9>{{ currentArray[5].sensorName }}:<br />{{
                  currentArray[5].vals + currentArray[5].unit
                }}</dv-decoration-9>
            </div>
            <div class="a-info">
              <dv-border-box-8>
                <div class="log">
                  <dv-scroll-board :config="fireLog" style="width: 320px; height: 458px" @click="showFireMessage" />
                </div>
              </dv-border-box-8>
            </div>
          </div>
        </div>
      </div>
      </dv-border-box-1>
  </dv-full-screen-container>
</template>

<script>
import VueAMap from "vue-amap";
let amapManager = new VueAMap.AMapManager();

export default {
  data() {
    let self = this;
    return {
      orgOptions: {},
      // 弹出框视频流地址（rtmp/hls）
      dialogSource: "rtmp://58.200.131.2:1935/livetv/hunantv",
      towerMarkers: [],
      dialogTableVisible: false,
      iconA: require("../assets/img/摄像头.svg"),
      iconB: require("../assets/img/温度传感器.svg"),
      towerIcon: require("../assets/img/灯塔.svg"),
      fireIcon: require("../assets/img/火灾.svg"),
      amapManager,
      center: [104.011916, 30.632383],
      plugin: [],
      mapEvents: {
        init(o) {
          // 加自定义卫星图图层
          let sateLayer = new AMap.TileLayer.Satellite({
            map: amapManager.getMap(),
            zIndex: 3,
            opacity: 1,
            detectRetina: true,
          });
        },
        rightclick(e) {},
        click(e) {},
      },
      towerMarkerEvents: {
        click(e) {
          console.log(e.target.get("vid"));
          // self.dialogTableVisible = true;
        },
      },
      // 火情标记点击事件
      fireMarkerEvents: {
        click(e) {
          let vid = e.target.get("vid");
          self.fireMessage.forEach((item, index) => {
            if (item.id == vid) {
              self.fireIndex = index;
              self.getFirePicture(vid);
            }
          });
        },
      },
      firePicture: [],
      // 选择的火情下标
      fireIndex: 0,
      fireMsgVisible: false,
      // 火情信息存放
      fireMessage: [{}],
      currentArray: [
        {
          sensorName: "名称",
          vals: 0,
          unit: "单位",
        },
        {
          sensorName: "名称",
          vals: 0,
          unit: "单位",
        },
        {
          sensorName: "名称",
          vals: 0,
          unit: "单位",
        },
        {
          sensorName: "名称",
          vals: 0,
          unit: "单位",
        },
        {
          sensorName: "名称",
          vals: 0,
          unit: "单位",
        },
        {
          sensorName: "名称",
          vals: 0,
          unit: "单位",
        },
      ],
      options: {
        isLive: true, //切换为直播流的时候必填
        height: "250px",
        autoplay: true, //自动播放
      },
      dialogOptions: {
        isLive: true, //切换为直播流的时候必填
        autoplay: true, //自动播放
        height: "100%",
      },
      // 视频流地址（hls）
      sources: [],
      //火情告警
      round: {
        radius: "65%",
        activeRadius: "75%",
        data: [
          {
            name: "周口",
            value: 55,
          },
          {
            name: "南阳",
            value: 120,
          },
          {
            name: "西峡",
            value: 78,
          },
          {
            name: "驻马店",
            value: 66,
          },
          {
            name: "新乡",
            value: 80,
          },
        ],
        digitalFlopStyle: {
          fontSize: 20,
        },
        showOriginValue: true,
      },
      //流动数据
      fireLog: {
        header: ["列1", "列2", "列3"],
        data: [],
        index: true,
        columnWidth: [50],
        align: ["center"],
      },
    };
  },
  created() {
    //天气组件
    window.WIDGET = {
      CONFIG: {
        layout: 1,
        width: 336,
        height: 150,
        background: 1,
        dataColor: "FFFFFF",
        borderRadius: 5,
        key: "gqBfNQcgJG",
      },
    };
    (function (d) {
      var c = d.createElement("link");
      c.rel = "stylesheet";
      c.href =
        "https://apip.weatherdt.com/standard/static/css/weather-standard.css?v=2.0";
      var s = d.createElement("script");
      s.src =
        "https://apip.weatherdt.com/standard/static/js/weather-standard.js?v=2.0";
      var sn = d.getElementsByTagName("script")[0];
      sn.parentNode.insertBefore(c, sn);
      sn.parentNode.insertBefore(s, sn);
    })(document);
  },
  mounted() {
    this.getFireMessage();
    this.getFireStatistics();
    this.getAllWatchTower();
    this.getAllCamera();
    this.getCurrent();
    // 每分钟获取一次传感器信息
    this.timer = setInterval(this.getCurrent, 60000);
  },
  beforeDestroy() {
    clearInterval(this.timer);
  },
  methods: {
    closeDialog() {
      this.$refs.VueAliplayerV2.pause();
    },
    // 获取所有瞭望塔信息
    getAllWatchTower() {
      let that = this;
      this.$http
        .post("watch_tower/get_all", {})
        .then(function (response) {
          response.data.forEach((item, index) => {
            let marker = {
              position: [Number(item.longitude), Number(item.latitude)],
              name: item.name,
              id: item.id,
            };
            that.towerMarkers.push(marker);
          });
        })
        .catch(function (error) {
          console.log(error);
        });
    },
    // 获取火情信息
    getFireMessage() {
      let that = this;
      this.$http
        .post("/fireReport", {})
        .then((response) => {
          that.fireMessage = response.data.data;
          console.log(that.fireMessage);
          let scrollBoardList = {
            header: ["原因", "设备", "时间"],
            data: [],
            index: true,
            columnWidth: [45, 80, 80],
            align: ["left"],
          };
          response.data.data.forEach((value, index) => {
            let item = [value.event_name, value.cameraName, value.startTime];
            scrollBoardList.data.push(item);
          });
          that.fireLog = scrollBoardList;
          console.log(that.fireLog);
        })
        .catch(function (error) {
          console.log(error);
        });
    },
    // 获取所有的摄像头信息
    getAllCamera() {
      let that = this;
      this.$http
        .post("camera/get_all", {})
        .then((response) => {
          let cameraList = response.data.cameraList;
          cameraList.forEach((item, index) => {
            that.sources.push(item[0].rtmp);
          });
        })
        .catch(function (error) {
          console.log(error);
        });
    },
    // 获取所有传感器信息
    getCurrent() {
      let that = this;
      this.$http.post("weater/get_current", {}).then((res) => {
        if (res.data.data) {
          that.currentArray = res.data.data;
        }
      });
    },
    // 获取火情图片
    getFirePicture(id) {
      let that = this;
      this.$http
        .post("fire_message/get_img/" + id, {})
        .then((res) => {
          that.firePicture[0] = "data:image/jpeg;base64," + res.data.firstImg;
          that.firePicture[1] = "data:image/jpeg;base64," + res.data.secondImg;
        })
        .then(function () {
          that.fireMsgVisible = true;
        })
        .catch((res) => {
          console.log(res);
        });
    },
    // 点击火情查看详情
    showFireMessage(event) {
      this.fireIndex = event.rowIndex;
      console.log(this.fireIndex);
      this.getFirePicture(this.fireMessage[this.fireIndex].id);
    },
    // 获取最近十天火情信息，
    getFireStatistics() {
      let days = [],
        num = [];
      this.$http
        .post("duping", {})
        .then((res) => {
          console.log(res.data);
          res.data.data.forEach((item) => {
            days.push(item.days);
            num.push(item.sum);
          });
        })
        .catch((res) => {
          console.log(res);
        });
      // 绘制统计图
      this.orgOptions = {
        color: ["#3398DB"],
        tooltip: {
          trigger: "axis",
          axisPointer: {
            // 坐标轴指示器，坐标轴触发有效
            type: "shadow", // 默认为直线，可选为：'line' | 'shadow'
          },
        },
        grid: {
          left: "3%",
          right: "4%",
          bottom: "3%",
          containLabel: true,
        },
        xAxis: [
          {
            type: "category",
            data: days,
            axisTick: {
              alignWithLabel: true,
            },
            axisLabel: {
              show: true,
              textStyle: {
                color: "#FFFF00",
              },
            },
          },
        ],
        yAxis: [
          {
            type: "value",
            axisLabel: {
              show: true,
              textStyle: {
                color: "#FFFF00",
              },
            },
          },
        ],
        series: [
          {
            name: "直接访问",
            type: "bar",
            barWidth: "50%",
            data: num,
          },
        ],
      };
    },
  },
};
</script>

<style>
.dialogDiv {
  width: 100%;
  height: 600px;
}
.fire_data {
  width: 55%;
}
.el-row div {
  display: inline-block;
  /* font-size: 20px; */
}
.fire_info {
  width: 40%;
  height: 40px;
  text-align: center;
  background-color: #66cc99;
}
div .dv-decoration-9 {
  width: 100px;
  height: 100px;
  color: #ffff00;
  text-align: center;
}

.statistical {
  position: relative;
  margin-left: 10px;
  width: 500px;
  height: 210px;
}

#weather-v2-plugin-standard {
  width: 336px;
  height: 150px;
}

.log {
  position: relative;
  top: 10px;
  left: 7.5px;
}

.left-v {
  position: relative;
  top: 17px;
  margin: 0 auto;
  width: 95%;
  height: 95%;
}

.amap-icon img {
  height: 40px;
}

.div1 {
  position: relative;
  top: 20px;
  margin: 0 auto;
  width: 95%;
  height: 95%;
}

body {
  background: url("../assets/background-img.jpg") no-repeat;
  background-repeat: no-repeat;
  background-size: cover;
}

* {
  margin: 0;
  padding: 0;
}

.amap-wrapper {
  width: 1000px;
  height: 600px;
  margin: 10px auto;
}

.bk {
  display: flex;
  justify-content: space-around;
}

.box {
  position: relative;
  top: 20px;
  margin: 0 auto 40px;
  width: 462px;
  height: 287px;
}

#video {
  position: relative;
  margin: auto;
  width: 1015px;
  height: 600px;
}

#transducer {
  width: 336px;
  height: 250px;
  display: flex;
  flex-wrap: wrap;
  justify-content: space-between;
}

.a-info {
  width: 336px;
  height: 478px;
}

.right {
  display: flex;
  flex-direction: column;
  justify-content: right;
  justify-content: space-between;
}

.mid {
  display: flex;
  flex-direction: column;
  justify-content: space-around;
}

.table {
  position: relative;
  top: 30px;
  display: flex;
  flex-direction: row;
  justify-content: space-around;
}

.tb-1 {
  width: 526px;
  height: 225px;
}

.tb-2 {
  width: 526px;
  height: 225px;
  display: flex;
}

.round {
  position: relative;
  margin: 35px auto;
  display: flex;
  justify-content: space-around;
  align-items: flex-start;
}

.title {
  font-size: 35px;
  color: #ffffff;
  text-align: center;
}
</style>
